<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-select
        v-model="listQuery.channel"
        filterable
        clearable
        placeholder="渠道"
      >
        <el-option
          v-for="(channel, i) in channels"
          :key="i"
          :label="channel"
          :value="channel"
        />
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
        >查询</el-button
      >
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
        >重置</el-button
      >
    </div>
    <div class="cs-filter-result">
      <AdvanceTable
        :loading="listLoading"
        :columns="columns"
        :list="list"
        fit
        :height="'calc(100vh - 270px)'"
      >
        <template slot="expenditure_activate" slot-scope="{ row }">
          {{ (row.expenditure / row.activate / 100).toFixed(2) }}
        </template>
        <template slot="activate_download" slot-scope="{ row }">
          {{
            row.download ? ((row.activate / row.download) * 100).toFixed(2) : 0
          }}%
        </template>
        <template slot="remain1Day" slot-scope="{ row }">
          {{
            row.activate
              ? ((row.remain1Day / row.activate) * 100).toFixed(2)
              : 0
          }}% ({{ row.remain1Day }})
        </template>
        <template slot="remain3Day" slot-scope="{ row }">
          {{
            row.activate
              ? ((row.remain3Day / row.activate) * 100).toFixed(2)
              : 0
          }}% ({{ row.remain3Day }})
        </template>
        <template slot="rechargeNumber_active" slot-scope="{ row }">
          {{
            row.activate
              ? ((row.rechargeNumber / row.activate) * 100).toFixed(2)
              : '--'
          }}%
        </template>
        <template slot="expenditure_rechargeNumber" slot-scope="{ row }">
          {{
            row.rechargeNumber
              ? (row.expenditure / row.rechargeNumber / 100).toFixed(2)
              : '--'
          }}
        </template>
        <template slot="day1Recharge_expenditure" slot-scope="{ row }">
          {{ ((row.day1Recharge / row.expenditure) * 100).toFixed(2) }}%
        </template>
        <template slot="day7Recharge_expenditure" slot-scope="{ row }">
          {{ ((row.day7Recharge / row.expenditure) * 100).toFixed(2) }}%
        </template>
        <template slot="day15Recharge_expenditure" slot-scope="{ row }">
          {{ ((row.day15Recharge / row.expenditure) * 100).toFixed(2) }}%
        </template>
        <template slot="day30Recharge_expenditure" slot-scope="{ row }">
          {{ ((row.day30Recharge / row.expenditure) * 100).toFixed(2) }}%
        </template>
        <template slot="arpu" slot-scope="{ row }">
          {{ row.activate ? (row.arpu / row.activate / 100).toFixed(2) : '--' }}
        </template>
        <template slot="_action_" slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="editDetail(row)">
            编辑
          </el-button>
        </template>
      </AdvanceTable>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
    <el-dialog title="编辑投放数据" :visible.sync="editDetailDialog">
      <el-form :model="editDetailItems">
        <el-form-item label="日期：">
          <el-input
            v-model="editDetailItems.targetDate"
            clearable
            :disabled="true"
            placeholder="请输入日期"
            style="width:130px"
          />
        </el-form-item>
        <el-form-item label="渠道：">
          <el-select
            v-model="editDetailItems.channel"
            filterable
            clearable
            placeholder="渠道"
          >
            <el-option
              v-for="(channel, i) in channels"
              :key="i"
              :label="channel"
              :value="channel"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="花费：">
          <el-input
            v-model="editDetailItems.expenditure"
            clearable
            placeholder="请输入花费"
            style="width:130px"
          />
        </el-form-item>
        <el-form-item label="下载数：">
          <el-input
            v-model="editDetailItems.download"
            clearable
            placeholder="请输入下载数"
            style="width:130px"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChangeDynamic = false">取 消</el-button>
        <el-button type="primary" @click="_editDetail()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AdvanceTable from '@/components/AdvanceTable'
import TablePagination from '@/components/TablePagination'
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
import { xhrPromotionCosts, xhrPromotionCostsUp } from '@/api/analysis'
import { parseTime } from '@/filters'

export default {
  name: 'PromotionCosts',
  components: { AdvanceTable, TablePagination },
  data() {
    return {
      list: [],
      channels: [],
      total: 0,
      listQuery: {
        offset: 0,
        limit: 100,
        startTime: null,
        endTime: null,
        channel: null,
      },
      editDetailDialog: false,
      editDetailItems: {
        targetDate: null,
        channel: null,
        expenditure: null,
        download: null
      },
      daterangeValue: '',
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      columns: [
        {
          key: 'targetDate',
          label: '日期',
          visible: true,
          filter: function (val) {
            return parseTime(val, '{y}-{m}-{d}')
          },
        },
        {
          key: 'expenditure',
          label: '花费(元)',
          visible: true,
          filter: function (val) {
            return val / 100
          },
        },
        {
          key: 'download',
          label: '下载',
          visible: true,
        },
        {
          key: 'activate',
          label: '激活',
          visible: true,
        },
        {
          key: 'expenditure_activate',
          label: '激活成本',
          visible: true,
          slot: true,
        },
        {
          key: 'activate_download',
          label: '激活率',
          visible: true,
          slot: true,
        },
        {
          key: 'remain1Day',
          label: '次留率(次留人数)',
          visible: true,
          slot: true,
        },
        {
          key: 'remain3Day',
          label: '3日留存率(留存人数)',
          visible: true,
          slot: true,
        },
        {
          key: 'rechargeNumber',
          label: '新增充值人数',
          visible: true,
        },
        {
          key: 'rechargeNumber_active',
          label: '新增付费率',
          visible: true,
          slot: true,
        },
        {
          key: 'expenditure_rechargeNumber',
          label: '新增付费成本',
          visible: true,
          slot: true,
        },
        {
          key: 'day1Recharge',
          label: '新增首日充值金额(元)',
          visible: true,
          filter: function (val) {
            return val / 100
          },
        },
        {
          key: 'day7Recharge',
          label: '新增7日充值金额(元)',
          visible: true,
          filter: function (val) {
            return val / 100
          },
        },
        {
          key: 'day15Recharge',
          label: '新增15日充值金额(元)',
          visible: true,
          filter: function (val) {
            return val / 100
          },
        },
        {
          key: 'day30Recharge',
          label: '新增30日充值金额(元)',
          visible: true,
          filter: function (val) {
            return val / 100
          },
        },
        {
          key: 'day1Recharge_expenditure',
          label: '新用户首日roi',
          visible: true,
          slot: true,
        },
        {
          key: 'day7Recharge_expenditure',
          label: '新用户7日roi',
          visible: true,
          slot: true,
        },
        {
          key: 'day15Recharge_expenditure',
          label: '新用户15日roi',
          visible: true,
          slot: true,
        },
        {
          key: 'day30Recharge_expenditure',
          label: '新用户30日roi',
          visible: true,
          slot: true,
        },
        {
          key: 'arpu',
          label: 'arpu',
          visible: true,
          slot: true,
        },
        {
          key: '_action_',
          label: '操作',
          slot: true,
          visible: true,
          fixed: 'right'
        }
      ],
    }
  },
  created() {
    this.getChannels()
    this.doSearch()
  },
  methods: {
    getChannels() {
      this.xhrGetChannels().then((resp) => {
        this.channels = resp.data
      })
    },
    doSearch() {
      xhrPromotionCosts(this.listQuery).then((resp) => {
        this.listLoading = false
        this.total = resp.data.count
        this.list = resp.data.list
      })
    },
    editDetail(row){
      this.editDetailItems.targetDate = parseTime(row.targetDate, '{y}-{m}-{d}')
      this.editDetailDialog = true
    },
    _editDetail(){
      xhrPromotionCostsUp(this.editDetailItems).then(resp => {
        console.log(resp)
      }).catch(resp => {
        console.log(resp)
      })
    }
  },
}
</script>
